<template>
    <div class="Topic">
        <!-- 列表 -->
        <TopicItem v-for="item,index in topicList" :key="index" :topicData="item" />
        
        <!-- 分页器 -->
        <van-pagination v-model="currentPage" :page-count="totalPages" mode="simple" @change="chanCurrentPage" />
    </div>
</template>

<script>
// 组件
import TopicItem from '@/components/topic/TopicItem.vue'

//请求api
import { getTopicListData } from '@/request/topicApi'
export default {
    components: {
        TopicItem
    },
    data() {
        return {
            topicList:[],
            currentPage: 1,
            pageSize: 5,
            totalPages: 0,
            count:0
        }
    },
    created() {
        this.loadTopicList()
    },
    methods:{
        // 上一页/下一页
        chanCurrentPage(page){
            this.currentPage = page
            this.loadTopicList()
        },
        // 加载列表数据
        async loadTopicList(){
            let res = await getTopicListData({
                page: this.currentPage,
                size: this.pageSize
            })

            let {data,count,totalPages,pageSize,currentPage} = res.data
            this.topicList = data
            this.currentPage = currentPage
            this.pageSize = pageSize
            this.count = count
            this.totalPages = totalPages
        }
    }
}
</script>

<style lang='less' scoped>
    .Topic{
        padding-bottom: .5rem;
    }

    /deep/.van-pagination__item{
        color: darkred;
    }
</style>
